<div
  class="h-40 bg-white transition duration-200 hover:bg-gray-100 border-gray-300 rounded-md"
>
  <a
    [href]="record.metadataUrl"
    [target]="linkTarget"
    [title]="record.abstract"
  >
    <div
      class="h-full flex flex-row items-center border border-gray-200 shadow-sm"
    >
      <ui-record-thumbnail
        class="w-40 h-full flex-shrink-0 border-r border-gray-200 bg-gray-100"
        [thumbnailUrl]="record.thumbnailUrl"
      ></ui-record-thumbnail>

      <div class="flex-grow h-full px-6 py-4 flex flex-col overflow-hidden">
        <div class="title-font text-lg font-medium mb-2">
          <h1 class="truncate">{{ record.title }}</h1>
        </div>
        <p class="leading-relaxed clamp-3 text-sm text-gray-700">
          {{ record.abstract }}
        </p>
        <div class="flex-grow"></div>
        <div class="flex flex-row items-center">
          <div
            class="text-gray-500 text-xs truncate capitalize border-r mr-4 pr-4"
            *ngIf="record.updateFrequency"
          >
            <span translate>{{ record.updateFrequency }}</span>
          </div>
          <div
            class="text-gray-500 text-xs border-gray-300 truncate viewable-downloadable"
            *ngIf="isViewable || isDownloadable"
          >
            <span *ngIf="isViewable" translate>record.action.view</span>
            <span *ngIf="isViewable && isDownloadable">,&nbsp;</span>
            <span *ngIf="isDownloadable" translate>record.action.download</span>
          </div>
        </div>
      </div>
    </div>
  </a>
</div>
